<template>
  <scrollDialog
    :title="dialogTitle"
    v-model:dialogVisible="dialogVisible"
    @clickSubmit="dialogSubmitClick"
  >
    <div class="actionPlan-container">
      <div class="section-title">每天规律治疗方案/恶化时按需使用药物</div>
      <div class="regular-treatment">
        <div class="header-title" v-if="showTool(showType, [1, 2, 4, 5])">
          {{ asthmaActionPlanTips.greenTitle }}
        </div>
        <action-table
          v-if="showTool(showType, [1, 4, 5, 8])"
          v-model="actionGreen"
          :is-disabled="disabled"
          tableHeader="规律治疗方案"
          tableColor="#3bba3b"
          @add="showMedical"
          @edit="edit"
          type="actionGreen"
          :ref="setRefs"
        ></action-table>
        <action-table
          v-if="showTool(showType, [2, 5])"
          v-model="usageGreen"
          :is-disabled="disabled"
          tableHeader="如果运动引起哮喘，可在运动前30分钟选择以下药物(如果运动引起哮喘，请及时就医)"
          tableColor="#3bba3b"
          @add="showMedical"
          @edit="edit"
          type="usageGreen"
          :ref="setRefs"
        ></action-table>
      </div>
      <div class="deterioration-treatment">
        <div class="header-title" v-if="showTool(showType, [1, 2, 4, 5])">
          {{ asthmaActionPlanTips.yellowTitle }}
        </div>
        <action-table
          v-if="showTool(showType, [1, 5])"
          v-model="actionYellow"
          :is-disabled="disabled"
          tableHeader="规律治疗方察"
          tableColor="#e7d020"
          @add="showMedical"
          @edit="edit"
          type="actionYellow"
          :ref="setRefs"
        ></action-table>
        <action-table
          v-if="showTool(showType, [2, 4, 5])"
          v-model="usageYellow"
          :is-disabled="
            disabled
              ? disabled || showTool(showType, [4])
              : docType === 0
              ? false
              : showTool(showType, [4])
          "
          :tableHeader="
            showType === 5 ? '恶化时按需使用药物' : '黄区按需使用药物'
          "
          tableColor="#e7d020"
          @add="showMedical"
          @edit="edit"
          type="usageYellow"
          :ref="setRefs"
        ></action-table>
        <div class="header-title" v-if="showTool(showType, [1, 2, 4, 5])">
          {{ asthmaActionPlanTips.redTitle }}
        </div>
        <action-table
          v-if="showTool(showType, [1, 5])"
          v-model="actionRed"
          :is-disabled="disabled"
          tableHeader="规律治疗方察"
          tableColor="#e73f3f"
          @add="showMedical"
          @edit="edit"
          type="actionRed"
          :ref="setRefs"
        ></action-table>
        <action-table
          v-if="showTool(showType, [2, 4, 5])"
          v-model="usageRed"
          :is-disabled="
            disabled
              ? disabled || showTool(showType, [4])
              : docType === 0
              ? false
              : showTool(showType, [4])
          "
          :tableHeader="
            showType === 5 ? '惡化时按需使用药物' : '红区按需使用药物'
          "
          tableColor="#e73f3f"
          @add="showMedical"
          @edit="edit"
          type="usageRed"
          :ref="setRefs"
        ></action-table>
      </div>
      <div class="acute-attack">
        <div v-if="isAction" class="section-title section-margin">
          {{ showType === 5 || 4 ? '急性发作缓解治疗方案：' : '治疗方案' }}
        </div>
        <action-table
          v-if="showTool(showType, [4, 3, 5])"
          v-model="emergencyUse"
          :is-disabled="disabled"
          :tableHeader="showType === 5 ? '急性发作使用药物' : ''"
          @add="showMedical"
          @edit="edit"
          type="emergencyUse"
        ></action-table>
      </div>
    </div>
  </scrollDialog>
</template>
<script setup>
  import scrollDialog from '@/components/ScrollDialog/index.vue'
</script>
<style lang="scss" scoped>
  .actionPlan-container {
    .header-title {
      font-size: 14px;
      margin-top: 40px;
    }
    .section-title {
      font-size: 18px;
      margin: 6px;
      position: relative;
      &:before {
        content: '';
        position: absolute;
        left: -6px;
        // top: 12px;
        width: 2px;
        height: 100%;
        border-left: 4px solid var(--el-color-primary);
        box-sizing: border-box;
        border-radius: 2px;
      }
    }
    .section-margin {
      margin-top: 20px;
      margin-bottom: 10px;
    }
    .footer-div {
      margin-top: 10px;
      .el-button {
        float: right;
        margin-right: 12px;
        margin-left: 0px;
      }
    }
  }
</style>
